全ての画像・文章の無断使用・転載はご遠慮ください。
- 前ページ
- 次ページ
ご無沙汰しておりますm(_ _)m
昨年2019年6月にショップのシステムをEC-CUBE2系から3系にバージョンアップしました。
あれからわずか半年ですが、
3系の機能の中にどうしても改善出来ない困る部分があったり、
4系の方の機能が安定してきて、プラグインも充実してきたようだったので、
この度、思い切ってEC-CUBE4.0.3にバージョンアップすることにしました。
EC-CUBE2系と3系は全く違うシステムで
3系と4系も全く違うシステム
バージョンアップと一言で言っても、ほぼ完全なるお引っ越し
前回は作業に１ヶ月ほどかかりましたが、
今回もやはり結局１ヶ月ほどかかっています💦
素人にはなかなかに苦労すること盛沢山なので、
今後の自分ために、また同じように苦労するかもしれない方に向けて、備忘録として書いておこうと思います。
（半年前に書いた3系の備忘録記事に、私自身凄く助けられたので、こういうことは覚えているうちに書き残しておくのが吉）
--------------------------------------------------------------------------------------------------
EC-CUBEといえば、まずはローカル環境の構築から。
これまでWindows＆XAMPPでやっていましたが
（XAMPP起動中にバッテリー不足で突然PCがシャットダウンしてから、XAMPPが使えなくなったのを機に）
以下の２つの方法でローカル環境を構築してみました。
◆まずはEC-CUBEの中の人おすすめのDocker-Compose。
注）Docker Desktopを利用するには、PCがWindows 10 64bit Proである必要があります。
公式：Docker Composeを使用してインストールする
EC-CUBE4の快適な開発環境をDocker Composeで整える for Windows
docker-composeでEC-CUBE4の開発環境構築
上記を参考にやれば、割とすんなりDocker-Compose環境は構築できると思います。
（前提条件必読）
Debugなんて気にしないよ、という方はもうコレでOKです。
更にDebugが使えない問題に関して、2つ目の記事に詳しく対処法が書かれていました。
私はおバカなので、きちんと文章を理解できず、エラーで挫折してしまいましたが
”[Remote-Containers: Reopen Locally]でローカル環境に戻れる”
のところで、ローカルに戻らずに次に進めば大丈夫かと思います！
◆ 別の方法、Xubuntu - 初心者に超絶分かりやすい解説あり
時を同じくして、知人のあけびさんより、
この世にこれ以上丁寧な解説方法はあるのか！？と思うくらい、
初心者にとっては手取り足取り超優しい、動画で説明付きの、XubuntuでのEC-CUBE４の設置方法の解説をいただけたので
Xubuntu環境も整えてみることにしました。
（Xubuntu環境を整えるということは、つまり、ローカルサーバー内でEC-CUBEを動かすということ
本番サーバーとやり取りするのと同じような感覚で WInSCPなどのFTPソフトを使ってファイルをアップ＆ダウンロードすることになります）
いざ、その方法
（以下のHyper-Vを利用するには、PCがWindows 10 64bit Proである必要があります。）
↓
Hyper-Vの仮想環境に必要最小限のLinux互換サーバを立ててECCUBE4を実行できるまでの環境を構築するテスト。
パっと見、その文章量に思わず尻込みしたくなりますが、大丈夫です。
文章量が多いのはそれだけ手取り足取り優しいから。
やり始めたらわかりますが、めっちゃ分かりやすくて、躓くところがありません。
結局、私は今Xubuntuのみで快適にローカルEC-CUBEを動かしていますが
実は当初、ノートPCのメモリがいっぱいいっぱいで、他のあらゆるものをオフにしないと、
時折Xubuntuサーバーさんがうまく立ち上がらないときがありました。
その点については、今後の作業の利便性を考え、さっさとメモリ増設で対応。
初心者でも分かりやすい記事を書いて、動画まで用意してくださったあけびさんに感謝です。。
ちなみに、これまでもこれからも、割とよく私の記事に出てくるあけびさんとは
私のかつてのお絵かき仲間であり、かつPC関係全般に強いという、とても頼りになる、心強い友人です。
いつもお世話になりっぱ(^ー^;
次はいざ、3系から４系へのデータ移行について書こうと思います。
現在、ショップのシステムをEC-CUBE2.系からEC-CUBE3系へ移行作業中なのですが、
調べて助かったこと、調べてもなかなかわからなかったこと、苦労した点を、今後の自分のため、また同じように苦労されている方のために、備忘録としてここに置いておきます。
色々なサイト様を参考にさせていただきました。
ありがとうございますm(_ _)m
◆2.15→3系への移行
EC-CUBE2.4、2.11、2.13からEC-CUBE3.0.1xへのデータ移行ツール公開
http://amidaike.hatenablog.com/entry/2017/12/15/230730
config.phpを修正した後、ファイルをサーバーのルートへ
SSH(TeraTerm)でルートへ行き、migration.shを実施
$ mysql -h mysql[データベースサーバーの番号].db.sakura.ne.jp -u ユーザー名 -p データベース名 < ファイル名
パスワードを聞かれるので、入力して実施
出来たデータを新しいDBへインポートする際、先にデータが入っているとエラーになるので
EC-CUBE3の管理画面よりサンプル商品、サンプルカテゴリーを全て削除、DBでインポートする際のエラー表示に従って、カテゴリークラスなども削除
データによっては大きすぎてエラーが出るので、対象ファイルをサーバーにUp後、SSHでインポート
◆商品詳細ページの商品説明にテーブル構造があると、テーブル前にbrタグが大量に挿入されてしまいレイアウトが崩れる
→brタグは、テーブル内容記載の際のエディタ上の改行が、テーブル内にbrタグとして入るのが原因のようで、
ブラウザ上で結果的にそれら改行が全てテーブルの外に出てテーブル前に挿入されてしまっているようでした。
なので、テーブル内のカラムが多いほど、挿入されるbrタグも多いという。
→twitterにてあけびさんより、商品詳細ページのtwigに以下のスクリプトを記入することで、とりあえず連続brタグが解消されるとお教えいただけました。
ありがとうございますm(_ _)m
<script> setTimeout(function(){ let d = document.getElementById('item_detail'); d.innerHTML = d.innerHTML.replace(/(\s*<br[\s\/]*>\s*){2,}/ig, '<br />'); },100); </script>
＜追記＞
↑こちらの記述で確かに連続brは消えるのですが、その後、このスクリプトがあるとカートが動作しないことが判明
現在は、CSSで
.item_comment br + br + br {
display: none;
}
としていて、３行以上の改行がある場合に非表示としています。
また、新規に商品登録する際には、divに新たなクラス属性をつけて、
br { display:block;}
としています。
◆メガメニュー
参考「 レスポンシブ対応、メガメニューを実装できるプラグイン「megamenu.js」の使い方」
https://design.aekana.com/blog/js-megamenu
app/template/default/default_frame.twigのヘッダに追加
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/mega-menu.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}">
<script src="{{ app.config.front_urlpath }}/js/mega-menu.js"></script>
カテゴリブロックに以下を記載
<nav id="category" class="drawer_block pc">
<div class="menu-container">
<div class="menu">
<ul>
<li><a href="{{ url('homepage') }}">Home</a></li>
<li>
{% for Category in Categories %}
{{ _self.tree(Category) }}
{% endfor %}
</li>
<li><a href="{{ url('homepage') }}contact">お問合せ</a></li>
</ul>
</div>
</div>
</nav>
◆ECCUBE3サイドブロックに独自メニューを設置する方法
http://www.tukuruhito.com/web/279
ここに書かれていることをしないと、カテゴリブロックをサイドにコピー移動しただけではメニューが展開しないのでやるべし
◆カテゴリ一覧で、特定のカテゴリを表示させない
在庫がないカテゴリは、EC-CUBE2系では自動で表示されなくなりましたが、3系では表示されてしまうので、強制的に非表示に。
今後在庫ができたときに手動で戻します。
今後在庫ができたときに手動で戻します。
カテゴリブロック
{% macro tree(Category) %}
直後に表示したくないカテゴリID（ここでは9）を記述
{% if (Category.id != 9) }
複数指定は＆で
{% if (Category.id != 9) and (Category.id != 12) and (Category.id != 62) }
◆商品詳細のサムネイル画像がスマホでは●表示になるのを、画像のまま表示
→CSSで対応
→トップページのスライド周辺の位置にも影響するので、DIVのID名やクラス名など考慮
◆売り切れ商品の値段をSoldOut表示に
商品詳細ページのtwigを参考に、価格表示の前後に下記を記入
{% if Product.stock_find %}価格の記述
{% else %}
<dd class="sale_price text-primary">SOLD OUT</dd>
{% endif %} {#End stock find#}
◆帳票まわりの変更
ロゴの変更：/app/template/admin/OrderPdf/logo.png
レイアウト元のPDF app/Plugin/OrderPdf/Resource/template/nouhinsyo1.pdf
ロゴやPDFファイル（名）を変更した場合、app/Plugin/OrderPdf/config.ymlのパスを変更
納品書にお届け先や配送方法が記載されないていないと、配送ミスの原因になってとても困るので、記載されるように変更。
↓
お届け先と支払い方法と配送方法を帳票に記載
app/Plugin/OrderPdf/Service/OrderPdfService.php
402行 お買い上げ明細部、//注文番号の下に下記を追加
// お支払い方法
$this->lfText(25, 145, $Order->getpayment(), 10);
$Shipping = $Order->getShippings()[0];
// お届け先郵便番号
$text = '〒 '.$Shipping->getZip01().' - '.$Shipping->getZip02();
$this->lfText(84, 125, $text, 10);
// お届け先都道府県+住所1
$text = $Shipping->getPref().$Shipping->getAddr01();
$this->lfText(84, 130, $text, 10);
$this->lfText(84, 135, $Shipping->getAddr02(), 10); //お届け先住所2
// お届け先氏名
$text = $Shipping->getName01().' '.$Shipping->getName02().' 様';
$this->lfText(84, 140, $text, 10);
// お届け先電話番号
$this->lfText(84, 145, $Shipping->getTel01().$Shipping->getTel02().$Shipping->getTel03(), 10);
//配送方法
$text = $Shipping->getShippingDeliveryName();
$this->lfText(149, 125, $text, 10);
それぞれのタイトルは修正PDF画像の方に追記保存
◆購入金額に応じて送料値引き、無料条件
購入金額によって、配送方法ごとに送料無料や値引きを設定したい
具体的には
税込み
・3239円未満：送料値引きなし
・3240円以上はクリックポスト、普通郵便（delivery_id:3; 185円）無料
・3240～7559は送料200円引き
・7560円以上はレターパックプラス(delivery_id:4; 510円）無料
・7560～17999円は送料510円引き
・18000円以上はゆうパック(delivery_id:5;）無料としたい
↓
/src/Eccube/Service/ShoppingService.php 680行目付近を下記に変更
/**
* 配送料無料条件(合計金額)の条件を満たしていれば配送料金を0に設定
*
* @param Order $Order
*/
public function setDeliveryFreeAmount(Order $Order)
{
// 配送料無料条件(合計金額)
$Shipping = $Order->getShippings()->first();
$deliv_id = $Shipping->getDelivery()->getId();
$deliveryFreeAmount = $this->BaseInfo->getDeliveryFreeAmount();
if (!is_null($deliveryFreeAmount)) {
// 合計金額が設定金額以上であれば送料無料
if ($Order->getSubTotal() <= 3000) {
if($deliv_id==3 ) $Order->setDeliveryFeeTotal(185);
if($deliv_id==6 ) $Order->setDeliveryFeeTotal(205);
if($deliv_id==4 ) $Order->setDeliveryFeeTotal(510);
if($deliv_id==5 ) $Order->setDeliveryFeeTotal($Order->getDeliveryFeeTotal());
}else if ($Order->getSubTotal() <= 6999) {
if($deliv_id==3 ) $Order->setDeliveryFeeTotal(0);
if($deliv_id==6 ) $Order->setDeliveryFeeTotal(0);
if($deliv_id==4 ) $Order->setDeliveryFeeTotal(310);
if($deliv_id==5 ) $Order->setDeliveryFeeTotal($Order->getDeliveryFeeTotal() - 200);
}else if ($Order->getSubTotal() <= 16666) {
if($deliv_id==3 ) $Order->setDeliveryFeeTotal(0);
if($deliv_id==6 ) $Order->setDeliveryFeeTotal(0);
if($deliv_id==4 ) $Order->setDeliveryFeeTotal(0);
if($deliv_id==5 ) $Order->setDeliveryFeeTotal($Order->getDeliveryFeeTotal() - 510);
}else{
$Order->setDeliveryFeeTotal(0);
// お届け先情報の配送料も0にセット
$shippings = $Order->getShippings();
foreach ($shippings as $Shipping) {
$Shipping->setShippingDeliveryFee(0);
}
}
}
}
但し、この方法だと、支払い方法を先に選択しないと、送料が正しく表示されないことがわかったので
shopping.twig内の該当の記述の順番を変えて、支払い方法を先に選択するようにしました。
◆2系の会員ポイントデータを3系へ
ポイントプラグインを導入後、挙動がおかしかったので以下を参考にDBへインポート
◆ポイントプラグインをPHP7.2で動かすとエラーが出る
→Warning: count(): Parameter must be an array or an object that implements Countable
→該当のファイルの行部分（付与率の設定がされていない場合）をコメントアウト
◆ポイント利用規約を作成
EC-CUBEプラグインでは、ポイントをつけることは出来ても、失効させることは出来ない
けれど、今回のようにバージョンアップやシステム入れ直しが生じた際、ポイントデータが消失する可能性があるし、消費者と店側とで、ポイント利用に関してトラブルになることも多いと聞いたので、利用規約を作成してトラブルに備える
◆サイトマップ作成
→sitemap.xml Editor"を使ってXMLサイトマップを自動生成しよう！
→Google Consoleさんにサイトマップを申請
◆SEO対策
タイトルが商品名＋店名の順番になるように
◆管理画面の商品の並び順を更新順から登録日順に
EC-CUBEのデフォルトでは、商品は更新日順に並ぶ。
これに慣れていたけれど、他店で商品が購入された際など、商品を探すのに手間取るので、並び順が動かないように設定
◆在庫切れ商品の並びを後ろへ
↑こちらのリンクを参考に
src/Eccube/Repository/ProductRepository.php
getQueryBuilderBySearchData() 内にて、
$qb ->orderBy('pc.stock', 'DESC');
この記述を加えてみたけれど、エラーになってカテゴリーページが表示されない
↓
そこでこちらを参考に
$qb->addSelect('pc.stock as HIDDEN stock');
$qb->OrderBy('stock', 'DESC');
とすれば上手くいく事がわかりました。
ただ、記述には工夫が必要で
$qb->orderBy('p.create_date', 'DESC');
$qb->addOrderBy('p.id', 'DESC');
上記、元々のコードの下に追記する形で
$qb->orderBy('p.create_date', 'DESC');
$qb->addOrderBy('p.id', 'DESC');
$qb->addoOrderBy('pc.stock', 'DESC');
としてもエラーになって表示されない。
・・・・のでこれらよりも上に追記
最終的にはこちらで落ちつきました
// 新着順
} else if (!empty($searchData['orderby']) && $searchData['orderby']->getId() == $config['product_order_newer']) {
// 在庫切れ商品非表示の設定が有効時対応
// @see https://github.com/EC-CUBE/ec-cube/issues/1998
if ($this->app['orm.em']->getFilters()->isEnabled('nostock_hidden') == true) {
$qb->innerJoin('p.ProductClasses', 'pc');
}
$qb->innerJoin('p.ProductClasses', 'pc');
$qb->addSelect('MAX(pc.stock) as HIDDEN stock_max');
$qb->groupBy('p.id');
$qb->orderBy('stock_max', 'DESC');
$qb->addOrderBy('p.create_date', 'DESC');
$qb->addOrderBy('p.id', 'DESC');
規格のある商品については、在庫にばらつきがあるので、MAX(pc.stock)をとって並ぶようにしていますが、
場合によってはMINでもいいかも。
価格順についてはこちら↓で落ち着きました（安い順はprice02のMAXをMINに）
$qb->addSelect('MAX(pc.price02) as HIDDEN price02_max','MAX(pc.stock) as HIDDEN stock_max');
$qb->innerJoin('p.ProductClasses', 'pc');
$qb->groupBy('p.id');
$qb->orderBy('stock_max', 'DESC');
$qb->addOrderBy('price02_max', 'DESC');
$qb->addOrderBy('p.id', 'DESC');
これで暫く様子見です。
たったこれだけの記述に、丸い一日頭を悩まされました(^ｰ^;
◆商品csv登録が16行ずつしか出来ない問題
17行目のフォーマットが一致しません、と出て、どうしても17行以上の商品をcsv登録できずにいて悩みましたが
結果、アップするcsvファイルの文字コードをUTF-8にすることで問題は解消しました。
エクセルから保存したShift-JISなcsvでも、16行ずつ分割すれば登録出来ていたので、17行目移行のデータに問題があるとも思えず
エラーログには何も残っていないし
プラグインを全て無効化しても問題が解消しないしで
この数日間かなり悩みました・・・(^ｰ^;
まさか自分のファイルの方に問題があったとは。
↓
実はどうやら、Shift-JISでも何件でも登録出来るのだそうです。
問題は私のパソコンの方？
ロケールの問題かも、とフォーラムで教えていただきましたが、どうすればいいかわからず。
とりあえずUTF-8保存で登録できるので良しとします。。。
やれやれ～
◆商品のcsvダウンロード項目と、商品登録csv項目とが違う件について
EC-CUBE3では、商品の変更を一括でしようと、商品csvデータをダウンロードしても、そのまでは登録用のcsvの雛形項目とは違うため、フォーマットが違うと言われて商品csv登録が出来ません。
EC-CUBE3がなぜこんな仕様にしているのか、
また何故いつまでも改善されないのか、全く理解に苦しみますが
仕方がないので自力で改善。
データベースのdtb_csvへ商品削除フラグと商品規格削除フラグを追加。
csv_id ：空欄
csv_type： 5 - カテゴリCSV
creator_id： 2 - 管理者
entity_name： Eccube\Entity\Product
field_name： product_del_flg
disp_name： 商品削除フラグ
rank： 31
enable_flg：１
create_date、update_date： カレンダーから今日の日付を
csv_id ：空欄
csv_type： 5 - カテゴリCSV
creator_id： 2 - 管理者
entity_name： Eccube\Entity\ProductClass
field_name： product_class_del_flg
disp_name： 商品規格削除フラグ
rank： 32
enable_flg：１
create_date、update_date： カレンダーから今日の日付を
管理画面のcsv出力項目設定画面に２つの項目が加えられているので、順番をcsv登録雛形通りの位置に変えればOK
◆帳票pdfをブラウザに表示させたい
私は配送方法として主にクリックポストを使っているんですが、
クリックポストの宛名PDFがChromeで文字化けするので、そのままでは印刷できず、毎回PDFをDLしてからAcrobat Readerから印刷しています。
クリックポストの宛名PDFはA6の用紙に印刷
帳票PDFはA5に印刷する都合上、
Acrobat Readerでいちいち両者の用紙変更・カラー・モノクロ変更をするのが手間なので、
帳票だけは、これまでのEC-CUBE2系と同様ブラウザから印刷したい。
・・・ので、デフォルトでDLしか出来なくなった帳票を、ブラウザに表示させるようにしました。
app/Plugin/OrderPdf/Service/OrderPdfService.php 140行目付近
以下、attachmentをinlineに変更するだけ。
// レスポンスヘッダーにContent-Dispositionをセットし、ファイル名をreceipt.pdfに指定
// $response->headers->set('Content-Disposition', 'attachment; filename="'.$service->getPdfFileName().'"');
$response->headers->set('Content-Disposition', 'inline; filename="'.$service->getPdfFileName().'"');
◆帳票の下部、備考欄にお客様からのお問合せを載せたい
app/Plugin/OrderPdf/Service/OrderPdfService.php
188行目あたり
// 備考を描画する
$this->renderEtcData($order, $formData);
カッコ内に＄orderを足す
320行目あたり、＜備考＞の下に以下を足す
$this->SetFont(self::FONT_GOTHIC, 'B', 10);
$this->MultiCell(0, 6, '＜ 備考 ＞', 'T', 2, 'L', 0, '');
$this->SetFont(self::FONT_GOTHIC, '', 10);
$this->Ln();
$text = preg_replace('/\s+$/us', '', $Order['Message']);
$this->MultiCell(0, 6, $text, '0', 2, 'L', 0, '20');
備考欄にではなく、表よりも上の方の
購入者情報らへん（ protected function renderOrderData(Order $Order)内）に記載する場合には、
$this->lfText(25, 148,$Order->getMessage(), 11);
みたいな記述でOKなんですが
これだと改行されないし、長い文章だと表とかぶってしまう場合があるので見にくいのですよね。
表の下部、備考欄に記載するには、上に書いたような書き方でないとうまく表示されません。
またも、この方法にたどり着くまでに1日がかりでした(^ｰ^;
◆受注メールの件名にお客様の名前を入れたい
[ショップ名] ○○○様- ご注文ありがとうございます
src/Eccube/Service/MailService.php
２４７行目
->setSubject('[' . $this->BaseInfo->getShopName() . '] ' . $Order->getName01() . '様- ' . $MailTemplate->getSubject())
◆受注メールに配送方法、メッセージを入れたい
/src/Eccube/Resource/template/admin/Mail/order.twig
お支払い方法：{{ Order.payment_method }}
配送方法: {% for Shipping in Order.Shippings %}
{{ Shipping.shipping_delivery_name }}
{% endfor %}
メッセージ：{{ Order.message }}